import React, { useState } from 'react';
import './Assets.css';

const Assets: React.FC = () => {
  const [activeTab, setActiveTab] = useState('my-assets');

  const tabs = [
    { id: 'my-assets', label: '我的资产' },
    { id: 'templates', label: '模板库' },
    { id: 'materials', label: '素材库' }
  ];

  const myAssets = [
    {
      id: 1,
      name: "客厅设计图",
      type: "image",
      size: "2.3MB",
      date: "2024-01-15",
      thumbnail: "🖼️"
    },
    {
      id: 2,
      name: "卧室布局方案",
      type: "image",
      size: "1.8MB",
      date: "2024-01-14",
      thumbnail: "🛏️"
    },
    {
      id: 3,
      name: "厨房设计视频",
      type: "video",
      size: "15.2MB",
      date: "2024-01-13",
      thumbnail: "🎥"
    }
  ];

  const templates = [
    {
      id: 1,
      name: "现代简约客厅模板",
      category: "客厅",
      downloads: 1234,
      thumbnail: "🏠"
    },
    {
      id: 2,
      name: "北欧风格卧室模板",
      category: "卧室",
      downloads: 856,
      thumbnail: "🛏️"
    },
    {
      id: 3,
      name: "工业风餐厅模板",
      category: "餐厅",
      downloads: 2341,
      thumbnail: "🍽️"
    }
  ];

  const materials = [
    {
      id: 1,
      name: "木质纹理素材",
      category: "纹理",
      downloads: 3456,
      thumbnail: "🌳"
    },
    {
      id: 2,
      name: "金属质感素材",
      category: "金属",
      downloads: 1789,
      thumbnail: "⚡"
    },
    {
      id: 3,
      name: "石材纹理素材",
      category: "石材",
      downloads: 987,
      thumbnail: "🪨"
    }
  ];

  const getCurrentData = () => {
    switch (activeTab) {
      case 'my-assets':
        return myAssets;
      case 'templates':
        return templates;
      case 'materials':
        return materials;
      default:
        return [];
    }
  };

  const renderAssetItem = (item: any) => {
    if (activeTab === 'my-assets') {
      return (
        <div key={item.id} className="asset-item">
          <div className="asset-thumbnail">
            <div className="thumbnail-icon">{item.thumbnail}</div>
            <div className="asset-type">{item.type}</div>
          </div>
          <div className="asset-info">
            <h4 className="asset-name">{item.name}</h4>
            <div className="asset-meta">
              <span className="asset-size">{item.size}</span>
              <span className="asset-date">{item.date}</span>
            </div>
          </div>
          <div className="asset-actions">
            <button className="action-btn">下载</button>
            <button className="action-btn secondary">删除</button>
          </div>
        </div>
      );
    } else {
      return (
        <div key={item.id} className="asset-item">
          <div className="asset-thumbnail">
            <div className="thumbnail-icon">{item.thumbnail}</div>
            <div className="asset-category">{item.category}</div>
          </div>
          <div className="asset-info">
            <h4 className="asset-name">{item.name}</h4>
            <div className="asset-meta">
              <span className="asset-downloads">{item.downloads} 次下载</span>
            </div>
          </div>
          <div className="asset-actions">
            <button className="action-btn">使用</button>
            <button className="action-btn secondary">预览</button>
          </div>
        </div>
      );
    }
  };

  return (
    <div className="assets-content">
      <div className="assets-header">
        <h1>资产库</h1>
        <div className="header-actions">
          <button className="upload-btn">
            <span className="btn-icon">📁</span>
            上传资产
          </button>
        </div>
      </div>

      <div className="assets-main">
        <div className="assets-tabs">
          {tabs.map(tab => (
            <button
              key={tab.id}
              className={`assets-tab ${activeTab === tab.id ? 'active' : ''}`}
              onClick={() => setActiveTab(tab.id)}
            >
              {tab.label}
            </button>
          ))}
        </div>

        <div className="assets-list">
          {getCurrentData().map(renderAssetItem)}
        </div>
      </div>
    </div>
  );
};

export default Assets;
